<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="backText"></block>
			<block slot="content">我的团队<text v-if="member && member.level">（{{member.level.name}}）</text></block>
		</cu-custom>
		
		<!-- <view class="whole-box" style="background-image: url(https://pingtuan-1251091607.cos.ap-shanghai.myqcloud.com/images/2021/03/10/image_1615357083_VQ5anlu7.jpg);background-size: 100% 100%;"> -->
		<view class="whole-box">
			<view class="gold-black-box">
				
				<view class="top-box radius">
					<!-- <image class="top-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image> -->
					<view class="top-box-content">
						<image class="avatar" :src="member && member.head_portrait ? member. head_portrait : '../../../static/default-avatar.png'" mode="aspectFill"></image>
						<text class="username">{{member && member.nickname ? member.nickname : '' }}</text>
						<view class="data-box">
							<view class="data-item">
								<text class="note">总人数</text>
								<text class="num">{{teamInfo && teamInfo.total ? teamInfo.total : '0'}}</text>
								
							</view>
							<!-- <view class="data-item">
								<text class="note">一类顾客</text>
								<text class="num">{{teamInfo && teamInfo.child_count ? teamInfo.child_count : '0'}}</text>
								
							</view>
							<view class="data-item">
								<text class="note">二类顾客</text>
								<text class="num">{{teamInfo && teamInfo.childTowcount ? teamInfo.childTowcount : '0'}}</text>
								
							</view> -->
							<view class="data-item">
								<text class="note2" :class="cur==0?'cur':'note3'" @tap="changeStatus(0)">一类顾客</text>
								<text class="num">{{teamInfo && teamInfo.child_count ? teamInfo.child_count : '0'}}</text>
							</view>
							<view class="data-item">
								<text class="note2" :class="cur==1?'cur':'note3'" @tap="changeStatus(1)">二类顾客</text>
								<text class="num">{{teamInfo && teamInfo.childTowcount ? teamInfo.childTowcount : '0'}}</text>
							</view>
							
						</view>
					</view>
					<!-- <image class="bg-logo" src="@/static/black_bg/bg-logo.png"></image> -->
					<view class="level-detail" v-if="member && member.level">
						<image src="@/static/level-blo.png"></image>
						<text>{{member.level.name}}</text>
					</view>
				</view>
				
				<view class="my-data-box radius" :style="'height:'+scroll_box_height+'px'" >
					<!-- <image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image> -->
					<view class="my-data-box-content">
					<!-- 	<view class="status-box">
							<text :class="cur==0?'cur':''" @tap="changeStatus(0)">一类顾客</text>
							<text :class="cur==1?'cur':''" @tap="changeStatus(1)">二类顾客</text>
						</view> -->
						
						<view class="padding-sx2">
							<view class="padding radius text-center shadow-blur bg-gray" >
							<!-- <view class="cu-form-group margin-top">
								<view class="title">搜索等级</view>
								<picker @change="PickerChange" :value="PickerChangeindex" :range="pickerListName">
									<view class="picker">
										{{PickerChangeindex>-1?pickerListName[PickerChangeindex]:''}}
									</view>
								</picker>
							</view> -->
							<view class="cu-bar search bg-white">
								<view class="search-form round ">
									<text class="cuIcon-search"></text>
									<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="输入用户ID"
									 confirm-type="search"></input>
								</view>
								<view class="action">
									<button class="cu-btn bg-black shadow-blur round" @click="ClickSearch()">搜索</button>
								</view>
							</view>
							</view>
						</view>
						
						
						
						<view class="list ">
							<scroll-view scroll-y :style="'height:'+scrollHeight+'px'" @scrolltolower="getMore">
								<block v-for="(item,index) in list" :key="index" v-if="list != ''">
									<view class="list-item radius">
										<image class="avatar" :src="item.head_portrait != '' ? item.head_portrait : '../../../static/default-avatar.png'"></image>
										<view class="info">
											<view class="info-line"><text class="bold">{{item.nickname ? item.nickname : item.realname}}（{{item.level.name}}:ID-{{item.id}}）</text></view>
											<view class="info-line"><text>团队总人数：{{item.total > 0 ? item.total : 0}}</text></view>
											<view class="info-line"><text>手机号码：{{item.mobile ? $common.changePhone(item.mobile): '无'}}</text></view>
											<view class="info-line"><text>加入时间：{{$common.timeFormat(item.created_at)}}</text></view>
										</view>
									</view>
									
								</block>
								<block v-if="list.length == 0">
									<view style="color: #000000;padding: 10px;" class="cu-load margin-center text-grey" >暂无数据</view>
								</block>
								<view v-else class="cu-load margin-center text-grey" :class="loading?'loading':'over'" style="color: #1A181E;"></view>
							</scroll-view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
		mounted() {
			// this.getScrollH()
		},
		data() {
			return {
				statistics: null,
				member:null,
				cur: 0,
				scroll_box_height: 900,
				scrollHeight: 500,
				teamInfo:null,
				loading:false,
				hasMore:true,
				page:1,
				list:[],
				pickerListName: ['一级', '二级', '三级'],
				pickerListID: [100, 200, 300],
				PickerChangeindex:0,
				InputBottom: 0,
			}
		},
		onLoad() {
			if (this.$common.loginAuth(true)) {
				this.$common.getMember().then((member)=>{
					this.member = member
					this.getTeamInfo()	
				})
			}
		},
		onShow() {
			
		},
		methods: {
			getScrollH() {
				let sys = uni.getSystemInfoSync();
				let winHeight = sys.windowHeight;
				//console.log(winHeight)
				let _this = this
				// 计算scroll-view高度
				let query = uni.createSelectorQuery().in(_this);
				query.select('.top-box').boundingClientRect()
				query.select('.padding-sx2').boundingClientRect()
				query.selectViewport()
				query.exec(function(res) {
					//console.log(res)
					_this.scroll_box_height = winHeight - res[0].bottom - 12 - 24
					_this.scrollHeight = winHeight - res[1].bottom - 24
				})
			},
			PickerChange(e) {
				this.PickerChangeindex = e.detail.value
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = e.detail.value
			},
			ClickSearch(e){
				this.getList2(this.cur)
			},
			changeStatus(i){
				this.cur = i
				this.list=[],
				this.hasMore= true,
				this.loading=false,
				this.page=1,
				this.PickerChangeindex = 0,
				this.InputBottom = 0,
				this.getList(this.cur)
			},
			getMore(){
				this.getList(this.cur)
			},
			getTeamInfo() {
				uni.showLoading({
					'title':'加载中...'
				})
				this.$http
					.get('team_info', {
						getcompany: 1
					})
					.then((response) => {
						uni.stopPullDownRefresh()
						this.teamInfo = response.data.data
						this.pickerListName = response.data.data.pickerListName
						this.pickerListID = response.data.data.pickerListID
						
						this.$common.setCache('team_info', response.data.data, 5 * 60)
						uni.hideLoading()
						this.getList(this.cur)
					})
					.catch((response) => {
						uni.stopPullDownRefresh()
						console.log(response)
					})
			},
			getList(index) {
				if(!this.teamInfo) return
				console.log('getList')
				if (this.hasMore && !this.loading) {
					uni.showLoading({
						'title':'加载中...'
					})
					
					let InputBottom = (!this.InputBottom) ? 0 :this.InputBottom
					this.$http
						.get('team_list', {
							type: this.cur,
							page: this.page,
							InputBottom: InputBottom,
							pickerListID: this.pickerListID[this.PickerChangeindex]
						})
						.then((response) => {
							console.log(response)
							this.loading = false
							let list = this.list
							if (response.data.data.length > 0) {
								list = list.concat(response.data.data)
							} else {
								this.hasMore = false
							}
							uni.hideLoading()
							this.list = list
							this.page += 1
							this.getScrollH()
							// console.log(this.teamInfo.levelData[index].obj)
							this.$forceUpdate()
						})
						.catch((response) => {
							console.log(response)
						})
				}
			},
			getList2(index) {
				if(!this.teamInfo) return
				//return false
				//if (!this.loading) {
					uni.showLoading({
						'title':'加载中...'
					})
					let InputBottom = (!this.InputBottom) ? 0 :this.InputBottom
					this.$http
						.get('team_list', {
							type: this.cur,
							InputBottom: InputBottom,
							pickerListID: this.pickerListID[this.PickerChangeindex]
						})
						.then((response) => {
							
							let list = []
							if (response.data.data.length > 0) {
								list = list.concat(response.data.data)
								
							}
							//uni.hideLoading()
							this.list = list
							
							this.getScrollH()
							// console.log(this.teamInfo.levelData[index].obj)
							this.$forceUpdate()
						})
						.catch((response) => {
							console.log(response)
						})
				//}
			},
		},
	}
</script>


<style>
	.whole-box{
		background-image: url(../../../static/red-new/new-back.png);
		background-size: 100% 100%;
		min-height: calc(100vh - 45px);
		padding: 12px 0 12px;
		/* position: fixed; */
		width: 100%;
	}
	.gold-black-box{
		padding: 12px 0 12px;
		margin: 10px 10rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.gold-black-box .top-box{
		/* margin-top: 25rpx; */
		width: 690rpx;
		height: 400rpx;
		/* border: 2rpx solid #999999; */
		/* border-radius: 30rpx; */
		overflow: hidden;
		position: relative;
		background-color: #ffffff;
	}
	.top-box .top-box-bg{
		width: 100%;
		height: 100%;
	}
	.top-box .top-box-content{
		width: 690rpx;
		/* height: 276rpx; */
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top-box-content .avatar{
		margin-top: 26rpx;
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		border: 1rpx solid #EAEAEA;
	}
	.top-box-content .username{
		margin-top: 14rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}
	.top-box-content .data-box{
		margin-top: 20rpx;
		width: 100%;
		margin-top: 28rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.data-box .data-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.data-box .data-item .num{
		width: 86rpx;
		height: 86rpx;
		/* background-color: #333333; */
		/* border: 2rpx solid #E5D4B9; */
		border-right: 0;
		border-bottom: 0;
		/* border-radius: 50% 50% 0 50%; */
		border-bottom-right-radius: 0;
		text-align: center;
		line-height: 86rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;;
	}
	.data-box .data-item .note{
		margin-top: 20rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #ffffff;
		/* background-color: #FCC710; */
		width: 80px;
		text-align: center;
		height: 25px;
		line-height: 25px;
		border-radius: 30rpx;
		/* background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFEA5E), to(#FCC710)); */
		/* background: -webkit-linear-gradient(left, #FFEA5E, #FFEA5E, #FCC710, #FCC710); */
		background-color: #1A181E;
		/* box-shadow: 0px 2rpx 0px 0px rgba(91, 82, 67, 0.5); */
		
	}
	
	
	
	.data-box .data-item .note2{
		margin-top: 20rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #000000;
		/* background-color: #FCC710; */
		border: 1px solid #000000;
		width: 80px;
		text-align: center;
		height: 25px;
		line-height: 25px;
		border-radius: 30rpx;
		/* background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFEA5E), to(#FCC710)); */
		/* background: -webkit-linear-gradient(left, #FFEA5E, #FFEA5E, #FCC710, #FCC710); */
		/* box-shadow: 0px 2rpx 0px 0px rgba(91, 82, 67, 0.5); */
		
	}
	
	.data-box .data-item text.cur{
		background-color: #1A181E;
		font-weight: bold;
		color: #ffffff;
		
	}
	
	
	.top-box .bg-logo{
		width: 196rpx;
		height: 54rpx;
		position: absolute;
		top: 26rpx;
		left: 20rpx;
	}
	
	.top-box .level-detail{
		position: absolute;
		top: 52rpx;
		left: 400rpx;
		padding: 0 20rpx;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* background-color: #000000; */
		/* background: -webkit-linear-gradient(left, #C48415, #C48415, #EDCB3E, #CA8B0F); */
		/* background: -webkit-gradient(linear, 0 0, 0 100%, from(#C48415), to(#CA8B0F)); */
	}
	.level-detail image{
		width: 145rpx;
		height: 43rpx;
		margin-right: 6rpx;
		flex-shrink: 0;
		left: -13px;
		/* top: 16px; */
	}
	.level-detail text{
		font-size: 22rpx;
		font-weight: bold;
		color: #ffffff;
		position: absolute;
		margin-top: 10rpx;
		margin-left: -12rpx;
	}
</style>

<style>
	.gold-black-box .my-data-box{
		margin-top: 12px;
		width: 690rpx;
		height: 600rpx;
		/* border: 2rpx solid #999999; */
		/* border-radius: 30rpx; */
		overflow: hidden;
		position: relative;
		background-color: #ffffff;
		/* opacity: 0.6; */
	}
	.my-data-box .my-data-box-bg{
		width: 100%;
		height: 100%;
	}
	.my-data-box .my-data-box-content{
		width: 690rpx;
		/* height: 336rpx; */
		position: absolute;
		left: 0;
		top: 0;
		padding: 30rpx 40rpx;
	}

	.my-data-box-content .status-box{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 25rpx;
		width: 65%;
		margin: 0 auto;
		/* border-bottom: 1rpx solid #999999; */
	}
	.status-box text{
		width: 150rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		/* background-color: #BFBFBF; */
		background-color: #EAEAEA;
		border-radius: 28rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #000000;
	}
	.status-box text.cur{
		background-color: #1A181E;
		font-weight: bold;
		color: #ffffff;
		
	}
	
	.my-data-box-content .list{
		
	}
	
	.my-data-box-content .list .list-item{
		padding: 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* background-color: #FFFAE2; */
		background-color: #1A181E;
		color: #ffffff;
		margin-top: 10px;
		/* border-bottom: 1rpx solid #999999; */
	}
	.list-item .avatar{
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		border: 1rpx solid #EAEAEA;
		margin-right: 20rpx;
		flex-shrink: 0;
	}
	.list-item .info{
		flex: 1;
	}
	.info .info-line{
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.info .info-line:first-child{
		margin-top: 0;
	}
	.info .info-line text{
		font-size: 30rpx;
		color: #ffffff;
	}
	.info .info-line text.bold{
		font-weight: bold;
	}
</style>